<template>
  <div class="temp4-article" :class="isShow?'':'hide'">
    <p class="tit">{{article.title}}</p>
    <p class="time">时间：<span>{{time}}</span>
    </p>
    <BannerMobile v-if="imgUrls.length" :list="imgUrls"></BannerMobile>
    <!--<div class="lunbo">
      <div class="tp animate"><img class="fade-in"
                                   src="http://i40.shenduxuetang.com/7f443537-1b3c-47f3-96fa-98342a6de8fc"><img
        src="http://i40.shenduxuetang.com/4c7ca2e5-5626-4d9d-b458-e29fccb8d455"></div>
      <div class="bar">
        <div class="barLeft"><img src="/Areas/Mccard/Content/css/images/bar01.png"></div>
        <div class="barRight"><img src="/Areas/Mccard/Content/css/images/bar02.png"></div>
      </div>
    </div>-->
    <div class="text" v-html="article.content"></div>
    <div class="buttons">
      <button v-click="()=>{$emit('goList',type)}">返回<br>目录</button>
      <div class="abtns">
        <a v-click="()=>{selectArticle(index-1)}">上一条：<span>{{getArticleTitle(index-1)}}</span></a><br>
        <a v-click="()=>{selectArticle(index*1+1)}">下一条：<span>{{getArticleTitle(index*1+1)}}</span></a>
      </div>
      <button class="btn" v-click="()=>{$emit('goIndex')}">返回<br>首页</button>
    </div>
  </div>
</template>

<script>
  import BannerMobile from './ArticleBannerMobile'
  import ajaxApi from '@/modules/ajax-api'
  export default {
    name: 'temp2-article',
    props: {
      isShow: Boolean
    },
    data () {
      return {
        type: '',
        id: '',
        list: [],
        index: 0,
        article: {}
      }
    },
    components: {
      BannerMobile
    },
    computed: {
      time () {
        /* eslint-disable camelcase */
        let {start_time, stage_time, meet_time, created_on} = this.article
        return (start_time || stage_time || meet_time || created_on || '').split('T')[0]
      },
      imgUrls () {
        let {article} = this
        let urls = this.getImgsUrl(article.url || article.img_url)
        return urls
      }
    },
    methods: {
      loadData (d) {
        let type = {
          getActivityList: 'getActivityDetail',
          getSafetyEduList: 'getSafetyEduDetail',
          getThemeMeetingList: 'getThemeMeetingDetail',
          getMicroReadList: 'getMicroReadDetail'
        }[d.type]

        this.type = d.type
        this.id = d.id
        this.list = d.list
        this.index = d.index
        ajaxApi.getArticle(type, this.id).then(data => {
          this.article = data.data
        })
      },
      getImgsUrl (url) {
        if (url) {
          return url.split(',')
        }
        return []
      },
      selectArticle (i) {
        let {list, type} = this
        if (list) {
          let d = list[i]
          if (d) {
            this.loadData({
              type,
              id: d.id,
              index: i,
              list
            })
            // this.$router.push({
            //   name: 'temp2article',
            //   params: {
            //     type,
            //     id: d.id,
            //     index: i,
            //     list
            //   }
            // })
          }
        }
      },
      getArticleTitle (i) {
        let {list} = this
        if (list) {
          let d = list[i]
          if (d) {
            return d.title
          }
        }
        return '没有了'
      }
    }
  }
</script>

<style scoped>
.temp4-article {
  height: 1480px;
  padding: 0 40px;
  /* position: relative; */
  position: absolute;
  top: 25px;
  left: 0;

}
.hide {
opacity: 0;
pointer-events: none;
}
.tit {
  text-align: center;
  font-size: 30px;
  /*height: 80px;*/
  /*line-height: 100px;*/
  height: 55px;
  line-height: 1.7;
}
.time {
  text-align: center;
  height: 60px;
  line-height: 40px;
  font-size: 16px;
}
/*.lunbo {
  height: 535px;
  border-radius: 8px;
  position: relative;
  .tp.animate img {
    transition: 0.4s ease;
  }

  .tp img {
    width: 860px;
    height: 535px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    opacity: 0;
  }

  .tp img.fade-in {
    opacity: 1;
  }

  .barLeft {
    position: absolute;
    top: 220px;
    left: 30px;
    cursor: pointer;
  }

  .barRight {
    position: absolute;
    top: 220px;
    right: 30px;
    cursor: pointer;
  }
}*/

.text {
  height: 700px;
  text-indent: 36px;
  font-size: 18px;
  margin-top: 20px;
  border-radius: 8px;
  text-align: justify;
  line-height: 30px;
  overflow: auto;
}

.buttons {
  position: absolute;
  /*bottom: -10px;*/
  bottom: 15px;
  left: 0;
  z-index: 1;
}

.buttons button {
  width: 100px;
  height: 70px;
  background-color: rgba(245, 178, 51, 0.8);
  color: #fff;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  margin-right: 20px;
  float: left;
}

.buttons a {
  display: block;
  float: left;
  width: auto;
  height: 35px;
  line-height: 35px;
  text-decoration: none;
  color: #555;
  font-size: 16px;
}
.buttons .abtns {
  overflow: hidden;
}

.buttons .btn {
  position: absolute;
  left: 760px;
  bottom: 0;
}

</style>
